<template>
	<view class="content">
		<!-- 轮播图布局 -->
		<swiper class="swiper" circular indicator-dots autoplay :interval="1500">
			<swiper-item v-for="item in bannerList" :key="item.bannerid">
				<image :src="item.img" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 宫格布局 -->
		<u-grid class='gridBox' :border="false" col='5'>
			<u-grid-item v-for="(item,index) in navList" :key="item.navid">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.imgurl" :size="36"></u-icon>
				<text class="grid-text">{{item.title}}</text>
			</u-grid-item>
		</u-grid>

		<!-- 商品数据 -->
		<u-cell-group>
			<u-cell v-for="item in proList" :key="item.proid" @click='goToDetail(item.proid)' :title="item.proname">
				<u-avatar slot='icon' size='84' shape='square' :src="item.img1"></u-avatar>
			</u-cell>
		</u-cell-group>


		<view class="backTop" @click="backTopClick" v-show='scrollTop > 250'>
			<u-icon name="arrow-upward" color="#000" size="24"></u-icon>
		</view>

	</view>

</template>

<script>
	import {
		getBannerList,
		getNavList,
		getProList
	} from '../../api/home.js'
	// import uButton from "uView-ui/components/u-button/u-button.vue";
	export default {
		data() {
			return {
				bannerList: [],
				navList: [],
				proList: [],
				count: 2,
				scrollTop: 0
			}
		},
		components: {
			// uButton
		},
		mounted() {
			getBannerList().then(res => {
				this.bannerList = res.data
			})
			this.navList = getNavList()
			
			getProList().then(res =>{
				this.proList = res.data
			})

		},
		onReachBottom(){
			getProList({
				count: this.count
			}).then(res =>{
				if(res.data.length <= 0){
					uni.showToast({
						title: '没有更多内容了'
					})
				}else {
					this.proList = [...this.proList,...res.data]
					this.count++
				}
			})
		},
		onPageScroll({scrollTop}){
			this.scrollTop = scrollTop
		},
		onPullDownRefresh(){
			// 监听用户下拉刷新用的
			getProList().then(res => {
				this.proList = res.data
				this.count = 2
				// 关闭下拉加载的图标
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			backTopClick(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			goToDetail(proid){
				console.log(proid);
				uni.navigateTo({
					url:'/pages/detail/detail?proid=' + proid,
					success(res) {
						 res.eventChannel.emit('proid', { proid,name: '小丁', age: 18 })
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	swiper {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.gridBox {
		padding: 10px;

		.grid-text {
			font-size: 14px;
		}
	}
	.content {
		overflow: hidden;
	}
	.backTop {
		position: fixed;
		bottom: 60px;
		right: 10px;
		background-color: white;
		border-radius: 50%;
		border: 1px solid gray;
		padding: 5px;
	}
</style>
